<template>
    <div id="admin">
        <el-button type="info" plain @click="$router.push('/system/addAdmins')"
            >新增管理员</el-button
        >
        <el-table :data="adminsData" border style="width: 100%">
            <el-table-column prop="username" label="账号"> </el-table-column>
            <el-table-column prop="state" label="权限">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.state"
                        type="danger"
                        plain
                        @click="
                            updateAdminState(scope.row._id, !scope.row.state)
                        "
                        >禁用</el-button
                    >
                    <el-button
                        v-else
                        type="warning"
                        plain
                        @click="
                            updateAdminState(scope.row._id, !scope.row.state)
                        "
                        >开启</el-button
                    >
                </template>
            </el-table-column>
            <el-table-column label="功能">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        plain
                        @click="
                            $router.push(
                                '/system/updateAdmins/' + scope.row._id
                            )
                        "
                        >修改密码</el-button
                    >
                    <el-button
                        type="success"
                        plain
                        @click="deleteAdmin(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 8, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("admin");
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 3,
        };
    },
    watch: {
        currentPage: function () {
            this.getAdmins({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            });
        },
        pageSize: function () {
            this.getAdmins({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            });
        },
    },
    computed: {
        ...mapState(["adminsData", "total"]),
    },
    mounted() {
        this.getAdmins({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
        });
    },
    methods: {
        ...mapActions([
            "getAdmins",
            "updateState",
            "deleteAdmins",
            "updateAdmins",
        ]),
        handleSizeChange(val) {
            this.pageSize = val;
            // this.getAdmins({ pageSize: this.pageSize });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            // this.getAdmins({ currentPage: this.currentPage });
        },
        updateAdminState(_id, state) {
            this.updateState({ _id, state });
            this.getAdmins({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            });
        },
        async deleteAdmin(_id) {
            const result = await this.deleteAdmins({ _id });
            if (result.code) {
                this.$message("删除成功");
                if (
                    (this.total - 1) % this.pageSize == 0 &&
                    this.currentPage > 1
                ) {
                    this.currentPage--;
                }
                this.getAdmins({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                });
            }
        },
    },
};
</script>

<style lang="scss">
#admin {
    line-height: 1;
    .el-table {
        th,
        td {
            text-align: center;
        }
    }
}
</style>